<template>
    <!-- 收银台title，和返回上一级箭头 -->
    <div class="header" @click="goBack">
        <van-icon name="arrow-left" style="margin:0 .3rem 0 0;" />回到上一页
    </div>

    <van-form @submit="onSubmit" class="vanFormWrap">
        <van-cell-group inset>
            <van-field v-model="en_username" name="en_username" label="用户名ID" placeholder="用户名ID"
                :rules="[{ required: true, message: '请填写用户名ID' }]" />
            <van-field v-model="cn_username" name="cn_username" label="用户名" placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]" />
            <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]" />
            <van-field v-model="password2" type="password" name="password2" label="重复密码" placeholder="重复密码"
                :rules="[{ required: true, message: '请填写密码' }]" />
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
                注册
            </van-button>
        </div>
    </van-form>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import requestFn from '@/utils/https';
import { Dialog } from 'vant';
import 'vant/es/dialog/style';


const router = useRouter()

const en_username = ref('');
const cn_username = ref('');
const password = ref('');
const password2 = ref('');

// 回到上一页
const goBack = () => {
    router.push({
        path: '/personal'
    })
}

const onSubmit = (values) => {
    if (password.value !== password2.value) {
        console.log('二次输入的密码不一样')
    } else {
        // console.log(values)

        requestFn({
            url: '/mysql_register',
            method: 'get',
            data: { n: values }
        }).then(res => {
            // console.log(res.data.error)
            if(res.data.error === false) {
                // 提示框
                Dialog.alert({
                    title: '注册成功！',
                    message: res.data.msg
                }).then(() => {
                    // 跳回到个人中心
                    router.push({
                        path: '/personal'
                    })
                });
            }
        })
    }
}

</script>


<style lang="less" scoped>
.header {
    margin: 0 .5rem;
    height: 1rem;
    padding: .2rem 0;
    text-align: left;
    font-size: .4rem;
}
.vanFormWrap {
    margin-top: 3rem;
}
</style>

